<!-- home -->
<template>
  <page-view>
    <top-bar title="意见反馈"
             :white="false">
    </top-bar>
    <page-content class="product">
      <div class="feed-container">

        <div class="f-box">
          <div class="f-count">
            <p>反馈建议</p>
            <p><span>{{txtVal}}</span>/200</p>
          </div>
          <textarea class="f-textarea"
                    @input="descInput"
                    v-model="desc"
                    maxlength="200"
                    placeholder="请填写10字以上的问题描述，以便我们更好的帮您解决问题">
      </textarea>
          <van-uploader v-model="fileList"
                        multiple
                        :max-count="3" />
        </div>
        <div class="f-concat">
          <p class="f-con">联系方式（选填）</p>
          <input type="text"
                v-model="contact"
                 placeholder="请填写您的手机号或者邮箱，便于我们与您联系"
                 class="f-input">
        </div>
        <div class="btn-box">
          <van-button round
                      type="info"
                      class="f-btn" @click="commit">提交</van-button>
        </div>

      </div>
    </page-content>
  </page-view>
</template>

<script>
import Vue from 'vue';
import { ActionSheet, Dialog, Icon, Toast, Uploader } from 'vant';
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import service from '@/utils/request';

Vue.use(Uploader);
Vue.use(ActionSheet);
Vue.use(Icon);
export default {
  components: {
    TopBar,
    PageView,
    PageContent
  },
  data () {
    return {
      show: false,
      //计数
      txtVal: '0',
      contact: '',
      desc: '',
      //图片
      filePath: [],
      fileList: [],
    }
  },

  mounted () { },

  methods: {
    showPopup () {
      this.show = true;
    },
    //textarea 计数
    descInput () {
      this.txtVal = this.desc.length;
    },
    upload (toast) {

      let file = null;

      toast.message = `上传图片（${this.fileList.length}）`;
      if(this.fileList.length){
        let item = this.fileList.pop();
        file = item.file;
      }

      if(!file){
        return Promise.resolve();
      }

      let formData = new FormData();
      // 向 formData 对象中添加文件
      formData.append('file', file);
      return service.post('/uploadFile.do', formData, {
        hideloading: true
      }).then(res => {
        this.filePath.push(res.data.src);
        return this.upload(toast);
      })
    },
    saveData(hideloading){
      return service.post('/apiFeedback.do', {
        content: this.desc,
        img: this.filePath.join(','),
        phone: this.contact
      }, {
        hideloading
      }).then(res => {
        Toast.success({
          message: '提交成功',
        });
        this.$router.go(-1);
      })
    },
    commit(){
      if (!this.desc) {
        Dialog.alert({
          title: '提示',
          message: '请填写反馈建议！',
          confirmButtonColor: '#585DF9',
        })
        return;
      }

      // if (!this.contact) {
      //   Dialog.alert({
      //     title: '提示',
      //     message: '请填写联系方式！',
      //     confirmButtonColor: '#585DF9',
      //   })
      //   return;
      // }

      let filePromise = null;
      let toast = null;

      if(this.fileList.length){
        toast = Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: '上传图片',
        });
        filePromise = this.upload(toast);
      }

      if(filePromise){
        filePromise.then(()=>{
          toast.message = `提交建议`;
        }).then(()=>{
          this.saveData(true).then(()=>{
            toast.clear();
          }, ()=>{
            toast.clear();
          });
        }, ()=>{
          toast.clear();
          Toast.loading({
            message: '上传图片出错！',
          });
        })
      }else{
        this.saveData();
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-box {
  text-align: center;
}
.feed-container {
  width: 100vw;
  background: #f2f1f8;
  overflow: hidden;
  .f-box {
    padding: 0 20px;
    height: 350px;
    background: #fff;
    margin-top: 7px;
    overflow: hidden;
    .f-count {
      display: flex;
      justify-content: space-between;
      margin-top: 13px;
      height: 18px;
      font-size: 13px;
      line-height: 18px;
      font-weight: 500;
      color: #3d3e54;
    }
    .f-textarea {
      width: 88%;
      padding: 0 20px;
      min-height: 214px;
      font-size: 13px;
      font-weight: 400;
      color: #7a7886;
      line-height: 18px;
      margin-top: 10px;
      border: 0;
      resize: none;
    }
  }
  .f-concat {
    padding: 0 20px;
    height: 85px;
    background: #fff;
    margin-top: 14px;
    overflow: hidden;
    .f-con {
      height: 18px;
      font-size: 13px;
      font-weight: 500;
      color: #3d3e54;
      line-height: 18px;
      margin: 14px 0;
    }
    .f-input {
      min-width: 279px;
      padding: 0 6px;
      height: 18px;
      font-size: 13px;
      font-weight: 400;
      color: #7a7886;
      line-height: 18px;
      border: 0;
    }
  }
  .f-btn {
    width: 335px;
    height: 57px;
    line-height: 57px;
    background: #585df9;
    border-radius: 29px;
    margin: 0 auto;
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin-top: 30px;
    text-align: center;
  }
}
</style>
